<template>
  <div style="height: 200px;text-align: center;left: 280px;top: 20px;">
    <h1>ToDoNow</h1>
    <!-- 诗句打印 -->
    <div class="blog-intro2" style="line-height: 100px;">
      {{ obj.output }} <span class="typed-cursor">|</span>
    </div>
  </div>
  <!-- 轮播图 -->
  <div>
    <a-carousel :style="{
      width: '700px',
      height: '240px',
    }" :auto-play="true" indicator-type="dot" show-arrow="hover">
      <a-carousel-item v-for="image in images">
        <img :src="image" :style="{
          width: '100%',
        }" />
      </a-carousel-item>
    </a-carousel>
  </div>
  <!-- 输入框 -->
  <div class="demo-register" style="left:600px;top: -220px;">
    <br>
    <Login ref="form" @on-submit="handleSubmit">
      <Email name="mail" />
      <Poptip trigger="focus" placement="right" width="240">
        <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写" @on-change="handleChangePassword" />
        <template #content>
          <div class="demo-register-tip">
            <div class="demo-register-tip-title" :class="passwordTip.class">
              强度：{{ passwordTip.strong }}
            </div>
            <Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
            <div class="demo-register-tip-desc">
              请至少输入 6 个字符。请不要使用容易被猜到的密码。
            </div>
          </div>
        </template>
      </Poptip>
      <Submit style="width:150px;left: 60px;"></Submit>

      <a @click="register" style="left:350px;color:#2d8cf0; top:-20px;font-size: 16px;">没账号？去注册</a>
    </Login>
  </div>

  <div class="bottom">
    <GlobalFooter :links="links" :copyright="copyright" />
  </div>

</template>
<script>
import axios from 'axios'
import EasyTyper from "easy-typer-js"
import userCount from '@/stores/userCount.js'
export default {
  created() {
    this.init();
    this.timer = setInterval(this.runTime, 1000);
  },
  data() {
    return {
      passwordRule: [
        {
          required: true, message: '密码不能为空！', trigger: 'change'
        },
        {
          min: 6, message: '密码不能少于6位！', trigger: 'change'
        }
      ],

      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0,
      links: [
        {
          key: '帮助',
          title: '帮助',
          href: '',
          blankTarget: true
        },
        {
          key: 'github',
          icon: 'logo-github',
          href: 'https://github.com/WYH-77',
          blankTarget: true
        },
        {
          key: '条款',
          title: '条款',
          href: '',
          blankTarget: true
        }
      ],
      copyright: "Copyright © 2022  ToDoNow",
      images: [
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
      ],
      tip: false,
      time: "",
      obj: {
        output: "",
        isEnd: false,
        speed: 300,
        singleBack: false,
        sleep: 0,
        type: "rollback",
        backSpeed: 40,
        sentencePause: true
      },
      articleList: [],
      blogInfo: {},
      current: 1,
      todoList: [],
      user: userCount(),
      userInfo: [],

    }

  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = '强';
      let className = 'strong';
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = '#19be6b';

      if (this.passwordLen < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
      } else if (this.passwordLen < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
      }

      return {
        strong,
        class: 'demo-register-tip-' + this.passwordLen < 6 ? 'low' : (this.passwordLen < 10 ? 'medium' : 'strong'),
        percent: percent * 10,
        color,

      }
    }
  },
  methods: {
    handleChangePassword(val) {
      this.passwordLen = val.length;
    },
    handleSubmit(valid, { mail, password }) {
      if (valid) {
        axios.post('http://localhost:8080/user/loginUser', { "email": mail, "pwd": password }).then(resp => {
          if (resp.data != '') {

            this.userInfo = resp.data.user

            /* 将登陆者的email 放到pinia  email里*/
            this.user.email = this.userInfo.email

            /* 将登录者的id存入pinia  userid中 */
            this.user.userid = this.userInfo.id

            /* 将用户信息放到Pinia  userInfo 中*/
            this.user.userInfo = resp.data.user

            /* 获取登录者所有todolist  start*/
            axios.post('http://localhost:8080/content/todo/' + this.user.userid).then(resp => {
              this.user.todolist = resp.data
            })
            /* 跳转 */
            this.$router.push('/mainMenu')
          } else {
            this.$Message.error('登陆失败，请检查账号密码');
          }

        })
      }

    },
    /* 跳转到注册页面 */
    register() {
      this.$router.push('/register')
    },
    /* 诗句打印 */
    init() {
      document.title = this.$route.meta.title;
      // 一言Api进行打字机循环输出效果
      fetch("https://v1.hitokoto.cn?c=i")
        .then(res => {
          return res.json();
        })
        .then(({ hitokoto }) => {
          this.initTyped(hitokoto);
        });
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj;
      // eslint-disable-next-line no-unused-vars
      const typed = new EasyTyper(obj, input, fn, hooks);
    },
    scrollDown() {
      window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight
      });
    },
  },

}
</script>
<style lang="stylus">
.typed-cursor
  opacity: 1
  animation: blink 0.7s infinite
@keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
</style>

<style>
.blog-intro2 {
  font-size: 1.5rem;
}

.bottom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 1200px;
}

.demo-register {
  width: 400px;
  margin: 0 auto !important;
}

.demo-register .ivu-poptip,
.demo-register .ivu-poptip-rel {
  display: block;
}

.demo-register-tip {
  text-align: left;
}

.demo-register-tip-low {
  color: #ed4014;
}

.demo-register-tip-medium {
  color: #ff9900;
}

.demo-register-tip-strong {
  color: #19be6b;
}

.demo-register-tip-title {
  font-size: 14px;
}

.demo-register-tip-desc {
  white-space: initial;
  font-size: 14px;
  margin-top: 6px;
}

.layout-base {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.layout-base>.ivu-layout {
  margin-bottom: 20px;
}

.layout-con {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.layout-single {
  height: 253px;
  margin-bottom: 48px;
  font-size: 14px;
  color: white;
}

.layout-con:last-child {
  margin: 0;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

.layout-breadcrumb {
  padding: 10px 15px 0;
}

.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}

.layout-hide-text .layout-text {
  display: none;
}

.layout-header,
.layout-footer {
  background: #7CBCE9;
  color: white;
}

.layout-content {
  background: #0F8DE9;
  min-height: 120px;
  line-height: 120px;
}

.layout-sider {
  background: #3A9FE8;
  min-height: 120px;
  line-height: 120px;
}

.layout-footer-center {
  text-align: center;
}

.layout iframe {
  width: 100%;
  border: 0;
}

.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.menu-icon {
  transition: all .3s;
}

.rotate-icon {
  transform: rotate(-90deg);
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width .2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>
